<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>地图展示-覆盖物添加</title>
  </head>
  <body>
    <style>
      html,
      body {
        height: 100%;
        width: 100%;
      }

      #container {
        height: 100%;
        width: 100%;
      }
    </style>
    <script
      type="text/javascript"
      src="//api.map.baidu.com/api?type=webgl&v=1.0&ak=HHIT00bq22U54MPnH54IDKrKCQw0pklK"
    ></script>
    <div id="container"></div>
    <script type="text/javascript">
      // 创建地图实例
      var map = new BMapGL.Map("container");
      // 禁止地图旋转和倾斜可以通过配置项进行设置
      // var map = new BMapGL.Map("allmap",{
      //     enableRotate: false,
      //     enableTilt: false
      // });
      // 创建点坐标
      var point = new BMapGL.Point(116.404, 39.915);
      // 地图初始化，同时设置地图展示级别
      map.centerAndZoom(point, 15);
      // 开启鼠标滚轮缩放
      map.enableScrollWheelZoom(true);
      //设置地图旋转角度
      map.setHeading(64.5);
      //设置地图的倾斜角度
      map.setTilt(73);
      // 添加比例尺控件
      var scaleCtrl = new BMapGL.ScaleControl();
      map.addControl(scaleCtrl);
      // 添加缩放控件
      var zoomCtrl = new BMapGL.ZoomControl();
      map.addControl(zoomCtrl);
      // 添加城市列表控件
      var cityCtrl = new BMapGL.CityListControl();
      map.addControl(cityCtrl);
      // 创建标注,将标注添加到地图中
      var point1 = new BMapGL.Point(116.301359, 39.918519);
      var marker = new BMapGL.Marker(point);
      var marker1 = new BMapGL.Marker(point1);
      map.addOverlay(marker);
      map.addOverlay(marker1);

      var myIcon = new BMapGL.Icon(
        "./img/logo.svg",
        new BMapGL.Size(200, 200),
        {
          // 指定定位位置。
          // 当标注显示在地图上时，其所指向的地理位置距离图标左上
          // 角各偏移10像素和25像素。您可以看到在本例中该位置即是
          // 图标中央下端的尖角位置。
          // anchor: new BMapGL.Size(10, 25),
          // 设置图片偏移。
          // 当您需要从一幅较大的图片中截取某部分作为标注图标时，您
          // 需要指定大图的偏移位置，此做法与css sprites技术类似。
          // imageOffset: new BMapGL.Size(0, 0 - 25) // 设置图片偏移
        }
      );
      // 创建标注对象并添加到地图
      var marker2 = new BMapGL.Marker(point1, { icon: myIcon });
      // 自定义标注监听事件
      marker2.addEventListener("click", function() {
        alert("您点击了标注");
      });
      map.addOverlay(marker2);

      // 添加折线 分别设置描边粗细、颜色、填充颜色
      var polyline = new BMapGL.Polyline(
        [
          new BMapGL.Point(116.399, 39.91),
          new BMapGL.Point(116.405, 39.92),
          new BMapGL.Point(116.425, 39.9)
        ],
        { strokeColor: "blue", strokeWeight: 2, strokeOpacity: 0.5 }
      );
      map.addOverlay(polyline);

      // 添加多边形
      var polygon = new BMapGL.Polygon(
        [
          new BMapGL.Point(116.387112, 39.920977),
          new BMapGL.Point(116.385243, 39.913063),
          new BMapGL.Point(116.394226, 39.917988),
          new BMapGL.Point(116.401772, 39.931364),
          new BMapGL.Point(116.41248, 39.927893)
        ],
        { strokeColor: "blue", strokeWeight: 2, strokeOpacity: 0.5 }
      );
      map.addOverlay(polygon);

      // 添加圆
      var circle = new BMapGL.Circle(point1, 500, {
        strokeColor: "red",
        strokeWeight: 2
      });
      map.addOverlay(circle);

      // 搜索
      // var Local = new BMapGL.LocalSearch(map, {
      //   renderOptions: { map: map },
      //   pageCapacity: 100
      // });
      // Local.search("银行");

      // var prism = new BMapGL.Prism(path, 5000, {
      //   topFillColor: "#5679ea",
      //   topFillOpacity: 0.5,
      //   sideFillColor: "#5679ea",
      //   sideFillOpacity: 0.9
      // });
      // map.addOverlay(prism);

      // 创建文本标注
      var content = "label";
      var label = new BMapGL.Label(content, {
        position: point,
        offset: new BMapGL.Size(10, 20)
      });
      map.addOverlay(label);
      label.setStyle({
        color: "#000",
        fontSize: "30px",
        border: "2px solid #1E90FF"
      });

      // 信息窗口
      var opts = {
        width: 250,
        height: 100,
        title: "Hello"
      };
      var infoWindow = new BMapGL.InfoWindow("World", opts);
      map.openInfoWindow(infoWindow, map.getCenter());

      // 添加交通流量图层
      map.setTrafficOn();
    </script>
  </body>
</html>
